import React, { useState } from "react";
import style from "./style.module.scss";

//  我的被采纳的建议 数据类型
interface AdoptIdeaRawState {
  releaseUserId: number; //病友圈发布用户id
  releaseUserNickName: string; //病友圈发布用户昵称
  releaseUserHeadPic: string; // 病友圈发布用户头像
  title: string; //病友圈 标题
  disease: string; //主要病症
  adoptTime: number; //我的建议内容
  content: string; //采纳时间
}

interface PropsType {
  item: AdoptIdeaRawState;
}

export const IdeaItem: React.FC<PropsType> = ({ item }) => {
  const [isExpend, setIsExpend] = useState<boolean>(false);
  return (
    <div className={style.idea_item}>
      <div className={style.releaseUserInfo}>
        <div className={style.userInfo}>
          <img
            src={item.releaseUserHeadPic}
            alt=""
            className={style.releaseUserHeadPic}
          />
          <div className={style.releaseUserNickName}>
            {item.releaseUserNickName}
          </div>
        </div>
        <div className={style.releaseContent}>
          <div className={style.title}>{item.title}</div>
          <div className={style.disease}>主要病症：{item.disease}</div>
          <div className={style.adoptTime}>采纳时间：{item.adoptTime}</div>
        </div>
      </div>
      <div className={style.myIdea}>
        <div className={style.title}>我的建议</div>
        <div className={isExpend ? style.content_expend : style.content}>
          {item.content}
        </div>
        <span className={style.fullText} onClick={() => setIsExpend(!isExpend)}>
          {!isExpend ? "全文" : "收起"}
        </span>
      </div>
    </div>
  );
};

export default IdeaItem;
